<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZCOOL</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
</head>

<body>
    <div id="nav">
        <div class="nav-wrap">
            <div class="nav-left">
                <img src="./img/logo.svg" alt="">
            </div>

            <div class="nav-mid">
                <div class="uls">
                    <li><a href="#">首页</a></li>
                    <li>
                        <a href="#">发现</a>
                        <div class="ull">
                            <div class="pp1">
                                <div>
                                    <p> <span>平面</span></p>
                                </div>
                                <div>
                                    <p> <span>Ul</span></p>
                                </div>
                                <div>
                                    <p><span>网页</span></p>
                                </div>
                                <div>
                                    <p><span>插画</span></p>
                                </div>
                                <div>
                                    <p><span>动漫</span></p>
                                </div>
                                <div>
                                    <p><span>摄影</span> </p>
                                </div>
                                <div>
                                    <p><span>空间</span></p>
                                </div>
                            </div>
                            <div class="pp1">
                                <div>
                                    <p><span>工业产品</span></p>
                                </div>
                                <div>
                                    <p><span>三维</span></p>
                                </div>
                                <div>
                                    <p><span>影视</span></p>
                                </div>
                                <div>
                                    <p><span>手工艺</span></p>
                                </div>
                                <div>
                                    <p><span>纯艺术</span></p>
                                </div>
                                <div>
                                    <p><span>服装</span></p>
                                </div>
                                <div>
                                    <p><span>其他</span></p>
                                </div>

                            </div>
                            <div class="tiao"></div>
                            <div class="pp3">
                                <p>精选作品&nbsp></p>
                                <p>精选文章&nbsp></p>
                                <p>精选收藏&nbsp></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">职位</a>
                        <div class="job">
                            <p>职位</p>
                            <p>公司</p>
                            <p>+发布职位</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">活动</a>
                        <div class="active">
                            <p>设计大赛</p>
                            <p>专题策划</p>
                            <p>线上活动</p>
                            <p>线下活动</p>
                            <p>学习音频</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">正版素材</a>
                        <div class="public">
                            <p>图片</p>
                            <p>视频</p>
                            <p>字体</p>
                            <p>音乐</p>
                            <p>我要供图</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">课程</a>
                        <div class="project">
                            <p>免费直播周周见</p>
                            <p>正在热销</p>
                            <p>口碑好课</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">版本保护</a>
                        <div class="prec">
                            <p>区块链存证</p>
                            <p>作品登记证书</p>
                            <p>维护服务</p>
                        </div>
                    </li>
                    <li>
                        <a href="#"><span class="iconfont icon-shenglvehao"></span></a>
                        <div class="des">
                            <p>设计师</p>
                            <p>榜单</p>
                            <p>站酷APP</p>
                            <p>站酷字库</p>
                        </div>
                    </li>
                    <li><a href="#"><span class="iconfont icon-fangdajing1"></span></a></li>
                    <li><a href="#"><span class="iconfont icon-cloud_ok"></span></a></li>

                </div>
            </div>

            <div class="nav-right">
                <button>登录</button>
                <em>|</em>
                <button>注册</button>
            </div>
        </div>
    </div>
    <div id="banner">
        <div class="swiper-container box">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/banner1.jpg@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner2.jpg@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner3.jpg@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner4.jpg@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner5.png@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner6.png@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner7.png@1380w" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner8.png@1380w" alt=""></div>


            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <div id="img">
        <div class="img-wrap">
            <img src="./img/link1.jpg" alt="">
            <img src="./img/link2.jpg" alt="">
            <img src="./img/link3.jpg" alt="">
            <img src="./img/link4.jpg" alt="">
            <img src="./img/link5.jpg" alt="">
        </div>
    </div>
    <div id="txt">
        <div class="txt-wrap">
            <div class="txt-con">
                <li>首页推荐</li>
                <li>最新发布</li>
            </div>
        </div>
    </div>
    <div id="case">
        <div class="case-wrap" id="xx">
           
        </div>
    </div>

    <div id="num">
        <div class="num-wrap">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>...</li>
                <li>99</li>
                <li>100</li>
                <li>></li>
            </ul>
        </div>
    </div>
    <div id="imgurl">
        <div class="imgurl-wrap">
            <img src="./img/images/bigbanner_03.jpg" alt="">
        </div>
    </div>
    <div id="huans">
        <div class="huans-wrap">
            <div class="tt">
                <li>推荐课程</li>
                <li>换一换</li>
            </div>
            <div class="yi" id="ii">
                <li>
                    <img src="./img/images/1_06.jpg" alt="">
                    <span>运营插画快速课程</span>
                </li>
                <li>
                    <img src="./img/images/2_07.jpg" alt="">
                    <span>商业插画之时尚人物篇</span>
                </li>
                <li>
                    <img src="./img/images/3_07.jpg" alt="">
                    <span>从零开始学包装设计</span>
                </li>
                <li>
                    <img src="./img/images/4_07.jpg" alt="">
                    <span>10堂课看懂西方艺术史</span>
                </li>
                <li>
                    <img src="./img/images/5_07.jpg" alt="">
                    <span>商业uI设计:全链式设计</span>
                </li>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="footer-wrap">
            <div class="footer-t">

                <ul>
                    <li>
                        <span class="iconfont icon-shouji"></span>
                        <img src="./img/微信二维码.png" alt="">
                        <em>移动版</em>
                    </li>
                    <li>关于我们</li>
                    <li>用户协议</li>
                    <li>隐私政策</li>
                    <li>侵权申诉</li>
                    <li>企业服务</li>
                    <li>帮助中心</li>
                    <li>联系我们</li>
                    <li>中文</li>
                    <li>English</li>
                </ul>
                <div class="f-r">
                    <span class="iconfont icon-weixin"></span>
                    <img src="./img/二维码.jpg" alt="">
                    <span class="iconfont icon-yanjing icc"></span>
                </div>
            </div>
            <div class="footer-b">
                <div class="ss">
                    <li>
                        <img src="./img/images/pp_03.jpg" alt="">&nbsp
                        <p>京公网安备11010502000501</p>
                    </li>
                    <li>|</li>
                    <li>广强电视节制作经营许可证(京)字第06990号</li>
                    <li>|</li>
                    <li>京ICP备10107824号</li>
                    <li>|</li>
                    <li>京ICP证130164号</li>
                </div>
                <div class="dd">
                    <ul>
                        <li>营业执照</li>
                        <li>|</li>
                        <li>网上有害信息举报区</li>
                        <li>|</li>
                        <li>不良信息学报电话: 010- 53658</li>

                        <li>举报邮箱jubao@zcool.com.cn</li>
                        <li>|</li>
                        <li>联系电话010-56538600</li>
                    </ul>
                    <span>Copyright&copy 2006-2020 ZCOOL站酷</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 回到顶部 -->
    <div id="bu">
        <span class="iconfont icon-up"></span>
    </div>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/json.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            // 垂直切换选项
            direction: 'horizontal', 
            // 循环模式选项
            loop: true, 
            //防止不可点击
            watchSlidesVisibility: true,
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },

            // 分页器
            //   pagination: {
            //     el: '.swiper-pagination',
            //   },

            //前进后退
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            //   // 滚动条
            //   scrollbar: {
            //     el: '.swiper-scrollbar',
            //   },
        })


        // xuanran
        var tt = document.querySelector('#xx')
        console.log(tt);

        list.forEach(function (item, index) {
            xx.innerHTML += `
                <div class="case-exp">
                <img src=${item.imgurl} alt="">
                <div class="case-mid">
                    <h1>${item.h1s}</h1>
                    <p>${item.ps}</p>
                    <dl>
                        <dd>
                            <span class="iconfont icon-${item.ico}"></span>
                            
                            <em>${item.ems}</em>
                        </dd>
                        <dd>
                            <span class="iconfont icon-${item.ico1}"></span>
                            <em>${item.ems1}</em>
                        </dd>
                        <dd>
                            <span class="iconfont icon-${item.icon2}"></span>
                            <em>${item.ems2}</em>
                        </dd>
                    </dl>
                </div>
                <div class="case-down">
                    <li class="nas">
                        <img class="img08" src=${item.imgurl1} alt="">
                        <div class="jie">
                            <div class="tou">
                                <div class="left">
                                    <img src="./img/images/touxinag_03.jpg" alt="">
                                    <div class="pp">
                                        <h1>深圳山田土</h1>
                                        <h2>深圳|设计爱好者</h2>
                                    </div>

                                </div>
                                <span>关注</span>
                            </div>
                            <div class="zhong">
                                <img src="./img/images/ban_03.jpg" alt="">
                            </div>
                            <div class="wei">
                                <ul>
                                    <div>
                                        <span class="iconfont icon-fire"></span>
                                        <dd>6768</dd>
                                    </div>
                                    <div>
                                        <span class="iconfont icon-xinxi"></span>
                                        <dd>2</dd>
                                    </div>
                                    <div>
                                        <span class="iconfont icon-ren"></span>
                                        <dd>83</dd>
                                    </div>


                                </ul>
                            </div>
                        </div>
                        <em>${item.ems3}</em>
                    </li>
                    <span>${item.spans}</span>

                </div>
            </div>
        `
        })

        window.onscroll = function () {
            var txt = document.querySelector(".txt-wrap")
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop >= 511) {
                txt.style.cssText = `
                width:1349px;
                height:56px;
                padding-top:0;
                margin: 0 auto;
                background-color:white;
                position:fixed;
                top:0;
                z-index: 999;
                `
            } else if (scrollTop<511) {
                txt.style.cssText = ``
            }
            if(scrollTop>=615){
                var ding=document.querySelector("#bu")
                ding.className="ding"
                ding.onclick=function(){
                   scrollTo(0,0)
                }
            }else if(scrollTop<=615){
                var ding=document.querySelector("#bu")
                ding.className=""

            }
            if(scrollTop>2300){
                var iii=document.querySelector("#ii")
                iii.style.display="block";
                console.log(66);
            }
        }
    </script>
</body>

</html>